<template>
   <HorizonScroll :target="target">
    <template v-slot:carousel_content>
      <section class="MV_main">
        <div class="index_head">
        <div class="index_title">
          <h2 class="icon_txt"> M V</h2>
        </div>
        </div>
        <div class="tab_index">
          <a href="#">精选</a>
          <a href="#">内地</a>
          <a href="#">港台</a>
          <a href="#">欧美</a>
          <a href="#">韩国</a>
          <a href="#">日本</a>
        </div>
        <div class="carousel slide" id="carousel_MV">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <ItemCard :PathFolder="PathFolder" :Nums="Shownums" :need="true"></ItemCard>
            </div>
            <div class="carousel-item ">
              <ItemCard :PathFolder="PathFolder" :Nums="Shownums" :need="true"></ItemCard>
            </div>
            <div class="carousel-item ">
              <ItemCard :PathFolder="PathFolder" :Nums="Shownums" :need="true"></ItemCard>
            </div>
            <div class="carousel-item ">
              <ItemCard :PathFolder="PathFolder" :Nums="Shownums" :need="true"></ItemCard>
            </div>
          </div>
        </div>
      </section>
     </template>
   </HorizonScroll>
</template>
  
  <script>
  import HorizonScroll from '../HorizonScroll.vue';
  import ItemCard from '../ItemCard.vue';
  const PathFolder = require.context('@/assets/MV', false, /\.(png|jpg|jpeg|gif|webp)$/);//读取图片,返回一个函数

  export default {
    name: 'MV',
    components: {
      HorizonScroll,
      ItemCard
    },
    data(){
      return{
        target:'#carousel_MV',
        PathFolder,
        Shownums:10
      }
    }
   
}
  </script>
  
  <style scoped lang="scss">
    @import '@/Style/scss/title.scss';
    @import '@/Style/scss/_variables.scss';
    .MV_main{
      width: 1200px;
    }
    .wrap{//不可删除，这是通过horizonscroll组件控制背景色的属性
      background-color: $secondary-color;
    }
    .index_title{
      background-position: $bg-offset-mv;
    }
  </style>
  